<template>
  <div :class="['HeadView']">
    <div class="view">
      <div class="btnDiv">
        <div class="con">
          <div style="width: 10%;" :class='["item","btn",btnGetSelectClass(Enum.startPath)]' @click="betClick(Enum.startPath)">
            <div class="txt"><p>网站首页</p><p class="py">HOME</p></div>
          </div>
          <div style="width: 10%;" :class='["item","btn",btnGetSelectClass(Enum.pinPaiJSPath)]' @click="betClick(Enum.pinPaiJSPath)">
            <div class="txt"><p>品牌介绍</p><p class="py">INTRODUCTION</p></div>
          </div>
          <div style="width: 10%;" :class='["item","btn",btnGetSelectClass(Enum.tesecpPath)]' @click="betClick(Enum.tesecpPath)">
            <div class="txt"><p>特色菜品</p><p class="py">PRODUCT</p></div>
          </div>
          <div style="width: 10%;" :class='["item","btn",btnGetSelectClass(Enum.mendfcPath)]' @click="betClick(Enum.mendfcPath)">
            <div class="txt"><p>门店展示</p><p class="py">STORE</p></div>
          </div>
          <div :class='["item","logo"]' @click="betClick(Enum.startPath,5)">
            <img src="img/index/logo.png" alt="logo" title="logo">
          </div>
          <div :class='["item","btn",btnGetSelectClass(Enum.hezzxPath)]' @click="betClick(Enum.hezzxPath)" >
            <div class="txt"><p>合作中心</p><p class="py">JOIN</p></div>
          </div>
          <div :class='["item","btn",btnGetSelectClass(Enum.ppzixuPath)]' @click="betClick(Enum.ppzixuPath)">
            <div class="txt"><p>品牌资讯</p><p class="py">NEWS</p></div>
          </div>
          <div :class='["item","btn",btnGetSelectClass(Enum.lxwomPath)]' @click="betClick(Enum.lxwomPath)">
            <div class="txt"><p>联系我们</p><p class="py">CONTACT</p></div>
          </div>
          <div :class='["item","phone"]'>
            <img src="img/index/head_dh.png">
          </div>
        </div>

      </div>
      <div class="banerDiv">
        <div class="divul">
          <ul :id="uiclsId">
            <li  v-for="(item,index) in runData.list" :key="index" :style="{width:runData.width+'rem'}">
              <div class="itemabs" :style="{width:runData.width+'rem'}">
                <img :src="item.bannerUrl" :alt="item.imgAlt" :title="item.imgTitle">
              </div>
            </li>
          </ul>
        </div>
        <div class="btndir">
          <div class="leftbtn viewHide" @click="bannerBtnCliclk(0)">向左</div>
          <div class="rightbtn viewHide" @click="bannerBtnCliclk(1)">向右</div>
        </div>
        <div :class="['maulDiv',(runData.list.length>1?'viewShow':'viewHide')]" :style="{width:runData.width+'rem'}">
          <div class="maul">
            <div :class="['item',(runData.index===index?'select':'')]" v-for="(item,index) in runData.list" :key="index"
            @click="imgItemClick(index)"></div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>


<style scoped>
.HeadView{
  width: 100%;
}

.view{
  width: 100%;min-width: 1200px;
}
.btnDiv{
  position: relative;font-weight: normal;flex-wrap:nowrap;width: 100%;height: 88px;background-color: #FEF5EA;
}
.con{
  position: relative; display:flex;display: -webkit-flex;flex-direction:row;justify-content:space-around;margin: auto;
}
.btnDiv .item{
  display:flex;display: -webkit-flex;align-items: center;
  position: relative;font-size: 16px;white-space: nowrap;color: #231815;font-weight: normal;height: 88px;
  min-width: 50px;margin: 0px;padding: 0px;list-style: none;width: 8%;line-height: 20px;
  font-family: "阿里巴巴普惠体 Medium", STXihei, STHeiti;
  border: none;text-decoration: none;
}
.btnDiv .item .txt{
  width: 100%;
}
.btnDiv .item .txt .py{
  font-size: 12px;line-height: 20px;
}
.btnDiv .selected{
  color: #FDF5E6;background-color: #84AE4C;
}
.btnDiv .item p{

}
.btnDiv .logo{
  /*width: 380px;min-width: 380px;*/width: 19%;
  display:flex;display: -webkit-flex;align-items: center;justify-content:center;
}
.btnDiv .logo img{
  width: 230px;
}
.btnDiv .btn{
  cursor: pointer;
}
.btnDiv .btn:hover{
  background-color:#84AE4C ;color: #FEF5EA;
}
.btnDiv .phone{
  /*width: 392px;*/ display:flex;display: -webkit-flex;align-items: center;justify-content:center;width: 18%;
}
.btnDiv .phone img{
    width: 196px;height:33px ;
}
.banerDiv{
  position: relative;width: 100%;background-color: #FEF5EA;
}
.divul{
  position: relative; height: 100%;   margin: auto;overflow:hidden;
}
.banerDiv ul{
  position:relative;height: 100%;width: 100%;
  display:flex;display: -webkit-flex;flex-direction:row; justify-content:flex-start;
}
.banerDiv ul li{
  position: relative;height: 100%;background-color: black;

}
.banerDiv ul li .itemabs{
  position:relative;left: 0;top:0;color: #FFFFFF;
  display:flex;display: -webkit-flex; justify-content:center;
}
.banerDiv ul li .itemabs img{
  width: 100%;
}
.banerDiv ul li .itemImg{
  position: relative; background-size: cover;width: 100%;/*height: 549px;*/height: auto;

}

.banerDiv .btndir{
  position: absolute;top:50%;width: 100%;
 /** display:flex;display: -webkit-flex;flex-direction:row;**/
}
.banerDiv .btndir .leftbtn{
  position: relative;float: left;cursor: pointer;
}
.banerDiv .btndir .rightbtn{
  position: relative;float: right;cursor: pointer;
}

.banerDiv .maulDiv{
  position: absolute;top: 95%;width: 100%;
}
.banerDiv .maul{
  position:relative;display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}

.banerDiv .maul .item{
  background:  #FEF5EA;width: 50px;height: 6px;border-radius: 10px;margin: 0 10px; cursor: pointer; opacity: 0.6;
}
.banerDiv .maul .select{
  opacity: 1;
}


.coco0{
  background-color: #fff2d8;
}
.coco1{
  background-color: #e07936;
}
.coco2{
  background-color: papayawhip;
}
.coco3{
  background-color: brown;
}
.coco4{
  background-color: darkslategray;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';

import Enum from "@/js/Enum";
let store = useStore();
let uiclsId=winApp.getClsId();


onMounted(() => {
  console.log("HeadView onMounted 初始化");
  getSrsData();

});


onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("HeadView onUnmounted 卸载组件实例后  ");
});


let btnwidth=computed(()=>{return store.state.bodyWidth;});
watch(btnwidth,(newValue,oldValue)=>{
  //if(newValue>1200)newValue=1200;
  runData.width=newValue/(window._windSize);
  console.log("HeadView btnwidth  runData.list ",newValue, runData.width);
});

function btnGetSelectClass(url){
  console.log('HeadView btnGetSelectClass',url);
  if(store.state.pages===url){
    return 'selected';
  }

}
function betClick(url){
  //console.log('HeadView betClick',store.state.pages===url);
  if(store.state.pages===url){
    return;
  }else{
    store.commit('updatePages',url);
  }
}





let runData=reactive({
  list:[],
  index:0,
  direction:1,//0:向左，1向右
  isRun:false,//true正在跑
  width:5,//
  time:1000,//
  time2:4000,//
  timeID:Enum.no_num,
})
let bannerBtnCliclk=(dir)=>{
  noticeItemGunFun(dir);
}

let imgItemClick=(index)=>{
  console.log('HeadView imgItemClick ',index);
  $('#'+uiclsId).stop();
  runData.isRun=true;
  runData.index=index;
  let left=runData.width*runData.index*-1+'rem';
  $('#'+uiclsId).animate({left:left},runData.time,'swing',()=>{
    runData.isRun=false;
    // console.log('noticeItemGunFun 完成',uiclsId);
  });
}
/**
 *
 * @param dir方向
 */
let noticeItemGunFun=(dir)=>{
  console.log('noticeItemGunFun',dir,runData.list.length);

  if(runData.list.length<2 || runData.isRun){
    return;
  }

  let isEnd=false;
  if(dir==null){
    if(runData.direction===1){
      runData.index++;
      if(runData.index>=runData.list.length){
        /*runData.index-=2;
        runData.direction=0;*/
        runData.index=0;
        isEnd=true;
      }
    }else{
      runData.index--;
      if(runData.index<0){
        runData.index+=2;
        runData.direction=1;
      }
    }
  }else{
    if(dir===1){
      runData.index++;
      if(runData.index>=runData.list.length){
        runData.index=runData.index-1;
        return;
      }
    }else{
      runData.index--;
      if(runData.index<0){
        runData.index=0;
        return;
      }
    }
  }

  let left=runData.width*runData.index*-1+'rem';
  runData.isRun=true;
  if(isEnd){
    $('#'+uiclsId).css('left',left);
    runData.isRun=false;
  }else{
    $('#'+uiclsId).animate({left:left},runData.time,'swing',()=>{
      runData.isRun=false;
    });
  }


}

let mendIdStatus=computed(()=>{return store.state.mendImgBanner.id;});
watch(mendIdStatus,(newValue,oldValue)=>{
  console.log("HeadView watch  mendIdStatus  ------------------------------",newValue);
  if(newValue===Enum.no_num){
    setDataHandler();
  }else{
    if(store.state.mendImgBanner.data===null){
      $.ajax({
        url: store.state.data_url+'api/getStoreBanner',
        type: 'GET',
        dataType: 'json',
        jsonp: "",
        cache: false,
        data: {"channelId":4},
        success: function(data) {
          //console.log("HeadView getStoreBanner ===========",data.content.list);
          store.state.mendImgBanner.data=data.content.list;
          setMenDingImg(newValue);
        },
        error: function(xhr, textStatus, errorThrown) {
          console.log("网络错误!");
        }
      });
    }else{
      setMenDingImg(newValue);
    }

  }
});

let setMenDingImg=(id)=>{
 // console.log('HeadView setMenDingImg 9999999999999',id,store.state.mendImgBanner.data,store.state.mendImgBanner.data[id]);
  if(store.state.mendImgBanner.data[id]!=null){
    runData.list=store.state.mendImgBanner.data[id];
    runReset();
  }else{
    setDataHandler();
  }


}

let liststaue=computed(()=>{return store.state.channelId;})

watch(liststaue,(newValue,oldValue)=>{
  console.log("HeadView watch  liststaue  runData.list ");
  setDataHandler();
});

let runReset=()=>{
  console.log("HeadView runReset 99999999999999");
  $('#'+uiclsId).stop();
  $('#'+uiclsId).css('left',0);
  runData.index=0;
  runData.direction=1;
  runData.isRun=false;
  if(runData.timeID!==Enum.no_num){
    clearInterval(runData.timeID);
    runData.timeID=Enum.no_num;
  }
  runData.timeID=setInterval(noticeItemGunFun,runData.time2);
}

let getSrsData=()=>{

    $.ajax({
      url: store.state.data_url+'api/getBanner',
      type: 'GET',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"t":Math.random()},
      success: function(data) {
        console.log("HeadView getBanner ===========",data.content.list);
        store.state.headData=data.content.list;
        if(store.state.headData['0']==null){
          store.state.headData['0']=[{'bannerUrl':'http://oss-alibaba.shankuishuo.com/shankuishuo/prod/banner/20240826134519.jpg'}];
        }
        setDataHandler();
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });

}

let setDataHandler=()=>{
  let key=store.state.channelId.toString();
  if(store.state.headData[key]==null){
    runData.list=store.state.headData['0'];
  }else{
    runData.list=store.state.headData[key];
  }
  runReset();
}
</script>



